﻿<Application x:Class="Sample.PhotoBrowser.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:zoil="http://zoil.codeplex.com/schemas/2012"
             xmlns:s="http://schemas.microsoft.com/surface/2008"
             xmlns:local="clr-namespace:Sample.PhotoBrowser"
             xmlns:components="clr-namespace:Sample.PhotoBrowser.Components"
             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
             xmlns:e="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        
        <components:LinkDirectionConverter x:Key="LinkDirectionConverter" />
        
        <!-- ControlTemplate for Selectionshape -->
        <ControlTemplate TargetType="{x:Type zoil:ZPortalShapeView}" x:Key="PortalShapeTemplate">
            <Border>
                <!-- We use a Path for the SelectionShape, so that just one Template is needed for a BoundingBoxSelection and a FreeShapeSelection -->
                <Path x:Name="SelectionPath" Data="{Binding Path=Model.ShapeGeometry}" Stroke="Purple" StrokeThickness="1" Stretch="Fill">
                    <Path.Fill>
                        <SolidColorBrush Color="Purple" Opacity="0.3"/>
                    </Path.Fill>
                </Path>
            </Border>
        </ControlTemplate>
        
        <!-- ControlTemplate for the DirectionalLink -->
        <ControlTemplate TargetType="{x:Type zoil:ShapeToShapeConnectionView}" x:Key="DirectionalLinkTemplate">
            <Canvas>
                <zoil:ArrowLine x:Name="ConnectorLine" ArrowEnds="{Binding Path=Model.Link.Direction, Converter={StaticResource ResourceKey=LinkDirectionConverter}}" X1="{Binding Path=Model.ConnectionPoint1.X}" Y1="{Binding Path=Model.ConnectionPoint1.Y}"  X2="{Binding Path=Model.ConnectionPoint2.X}" Y2="{Binding Path=Model.ConnectionPoint2.Y}" Stroke="White" StrokeThickness="3" />
            </Canvas>
        </ControlTemplate>
        
        <!-- ControlTemplate for the NonDirectionalLink -->
        <ControlTemplate TargetType="{x:Type zoil:ShapeToShapeConnectionView}" x:Key="NonDirectionalLinkTemplate">
            <Canvas>
                <Line x:Name="ConnectorLine" X1="{Binding Path=Model.ConnectionPoint1.X}" Y1="{Binding Path=Model.ConnectionPoint1.Y}"  X2="{Binding Path=Model.ConnectionPoint2.X}" Y2="{Binding Path=Model.ConnectionPoint2.Y}" Stroke="White" StrokeThickness="3" Opacity="0.5" StrokeDashArray="1.5, 0.5"/>

                <Ellipse Width="10" Height="10" Fill="YellowGreen" RenderTransformOrigin="0.5, 0.5" Canvas.Left="-5" Canvas.Top="-5" Stroke="White" StrokeThickness="1" Cursor="Hand">
                    <Ellipse.RenderTransform>
                        <TranslateTransform X="{Binding Path=Model.ConnectionPoint1.X}" Y="{Binding Path=Model.ConnectionPoint1.Y}"/>
                    </Ellipse.RenderTransform>
                </Ellipse>

                <Ellipse Width="10" Height="10" Fill="YellowGreen" RenderTransformOrigin="0.5, 0.5" Canvas.Left="-5" Canvas.Top="-5" Stroke="White" StrokeThickness="1">
                    <Ellipse.RenderTransform>
                        <TranslateTransform X="{Binding Path=Model.ConnectionPoint2.X}" Y="{Binding Path=Model.ConnectionPoint2.Y}"/>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Canvas>
        </ControlTemplate>

        <!-- ControlTemplate for the Portal -->
        <ControlTemplate TargetType="{x:Type zoil:ZPortalView}" x:Key="PortalTemplate">
            <!-- Our ControlTemplate contains a thick border, that allows Drag and Drop on the Surface -->
            <Border BorderBrush="#99FFFFFF" Background="#33FFFFFF" BorderThickness="1" Padding="40" zoil:ZInformationLandscape.ZoomTarget="True">
                <!-- A ZoomModifier is used for an AntiZoom of our Border, that our Borderthickness has allways the same thickness -->
                <zoil:ZInformationLandscape.ZoomModifierGroup>
                    <zoil:ZoomModifierCollection>
                        <zoil:ThicknessModifier Property="Border.BorderThickness" Modifier="0.0"/>
                    </zoil:ZoomModifierCollection>
                </zoil:ZInformationLandscape.ZoomModifierGroup>
                <Border Background="#FF333333" BorderBrush="#FF000000" BorderThickness="1" Padding="0" ClipToBounds="True">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border Background="Black" Grid.Row="0">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto" MinWidth="39" />
                                </Grid.ColumnDefinitions>
                                <Border Width="Auto" Padding="0" Grid.Column="0">
                                    <StackPanel Orientation="Horizontal">
                                        <!-- These are the Buttons that switch between Visualizations -->
                                        <s:SurfaceRadioButton x:Name="BarChartButton" Background="Black" FontSize="16" Foreground="White" Content="BarChart" Margin="5"/>
                                        <s:SurfaceRadioButton x:Name="ListViewButton" Background="Black" FontSize="16" Foreground="White" Content="ListView" Margin="5" IsChecked="True"/>
                                    </StackPanel>
                                </Border>
                                <s:SurfaceButton Grid.Column="1" Background="Black" FontSize="16" Foreground="White" Content="X" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0, 0, 4, 0">
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="Click">
                                            <e:EventToCommand Command="{Binding Path=ClosePortalCommand, Mode=OneWay}" PassEventArgsToCommand="False" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </s:SurfaceButton>
                            </Grid>
                        </Border>
                        <Grid Grid.Row="1">
                            <Grid x:Name="BarChartBorder">
                                <Grid.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0, 1">
                                        <GradientStop Color="#FF333333" Offset="0"/>
                                        <GradientStop Color="#FF555555" Offset="0.5"/>
                                        <GradientStop Color="#FF333333" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>
                                <!-- This is where our first Visualization becomes added -->
                                <!-- Binding the DataContext of our Visualization to the SelectedElements -->
                                <local:FlickrPhotoBarChart ItemsSource="{Binding Path=Model.PortalShape.SelectedElements}" Visibility="{Binding ElementName=BarChartButton, Path=IsChecked, Converter={zoil:BooleanToVisibilityConverter}}"/>
                                <!-- This is where our second Visualization becomes added -->
                                <!-- Binding the DataContext of our Visualization to the SelectedElements -->
                                <Border Visibility="{Binding ElementName=ListViewButton, Path=IsChecked, Converter={zoil:BooleanToVisibilityConverter}}">
                                    <!-- the following Visualization is a simple customized ListBox -->
                                    <!-- Important is not to bind the DataContext of the ListBox, but binding the ItemsSource to SelectedElements -->
                                    <s:SurfaceListBox Foreground="White" ItemsSource="{Binding Path=Model.PortalShape.SelectedElements}" BorderThickness="0" Margin="5">
                                            <ListBox.Background>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0, 1">
                                                    <GradientStop Color="#FF333333" Offset="0"/>
                                                    <GradientStop Color="#FF555555" Offset="0.5"/>
                                                    <GradientStop Color="#FF333333" Offset="1"/>
                                                </LinearGradientBrush>
                                            </ListBox.Background>
                                            <!-- This is where our customization appears, by defining an ItemTemplate -->
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel Orientation="Horizontal">
                                                        <!-- Items will be represented by a round Image and a Label containing a Title, simply set by binding to the properties -->
                                                        <Ellipse Width="50" Height="50" Stroke="YellowGreen" StrokeThickness="2">
                                                            <Ellipse.Fill>
                                                            <ImageBrush ImageSource="{Binding Path=SmallUrl}" Stretch="UniformToFill"/>
                                                            </Ellipse.Fill>
                                                        </Ellipse>
                                                    <TextBlock Margin="10, 0, 0, 0" Foreground="White" FontSize="10" Text="{Binding Path=Title}" VerticalAlignment="Center"/>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                    </s:SurfaceListBox>
                                </Border>  
                            </Grid>
                        </Grid>
                    </Grid>
                </Border>
            </Border>
        </ControlTemplate>
    </Application.Resources>
</Application>
